<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0, user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="format-detection" content="telephone=no">
	<title>用户订单详情</title>
	<link rel="stylesheet" type="text/css" href="../../Public/css/reset.css"/>
	<link rel="stylesheet" type="text/css" href="../../Public/css/main.css"/>
	<link rel="stylesheet" type="text/css" href="../../Public/css/my.css"/>
	<link rel="stylesheet" type="text/css" href="../../Public/css/slide.css"/>
	<link rel="stylesheet" type="text/css" href="../../Public/css/list.css">
	<script type="text/javascript" src="../../Public/js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="../../Public/js/rem.js"></script>
	<script type="text/javascript" src="../../Public/js/swiper-3.3.1.jquery.min.js"></script>
	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
</head>
<body>
	<!-- head start -->
	<header class="header psa clear bg-color1 bg-color3">
		<span class="back-button" onclick="history.go(-1)">
			<i></i>
			订单详情
		</span>
	</header>
	<!-- head end -->

	<!-- content start -->
	<section class="mt9">
		<ul class="jy_list">
			<volist name="lists['posts']" id="vo">
			<li>
				<div class="clear tab_title">
					<span class="fl jy_name">
						<i>○</i>基本信息
					</span>
					<i class="fr yjt_icon"></i>	
					<span class="fr jy_money">查看</span>
				</div>
				<div class="transaction_details">
					<p>
						ID：<span>123</span>
					</p>
					<p>
						联系电话：<span>123456789</span>
					</p>
					<p>
						E-Mail：<span>123456@qq.com</span>
					</p>
					<p>
						电话：<span>12345678978</span>
					</p>
					<p>
						应付：<span>123</span>
					</p>
					<p>
						订单状态：<span>已支付/未发货</span>
					</p>
					<p>
						下单时间：<span>2017-05-10  17:20</span>
					</p>
					<p>
						支付时间：<span>2017-05-10  17:20</span>
					</p>
					<p>
						支付方式：<span>其他方式</span>
					</p>
				</div>
			</li>
			<li>
				<div class="clear tab_title">
					<span class="fl jy_name">
						<i>○</i>收货信息
					</span>
					<i class="fr yjt_icon"></i>	
					<span class="fr jy_money">查看</span>
				</div>
				<div class="transaction_details">
					<p>
						收货人：<span>侯亮平</span>
					</p>
					<p>
						联系电话：<span>123456789</span>
					</p>
					<p>
						地址：<span>武汉武昌</span>
					</p>
					<p>
						邮编：<span>123456</span>
					</p>
					<p>
						配送方式：<span>申通物流</span>
					</p>
				</div>
			</li>
			<li>
				<div class="clear tab_title">
					<span class="fl jy_name">
						<i>○</i>商品信息
					</span>
					<i class="fr yjt_icon"></i>	
					<span class="fr jy_money">查看</span>
				</div>
				<div class="transaction_details">
					<p>
						商品：
						<span>红衣主角2015冬装新款走秀款大气约黄色羊毛呢大衣.</span>
					</p>
					<p>
						数量：<span>1</span>
					</p>
					<p>
						单品价格：<span>123</span>
					</p>
					<p>
						会员折扣价：<span>119</span>
					</p>
					<p>
						应单品小计：<span>123</span>
					</p>
					<p>
						状态：<span>已支付/未发货</span>
					</p>
					<p>
						商品：
						<span>红衣主角2015冬装新款走秀款大气约黄色羊毛呢大衣.</span>
					</p>
					<p>
						数量：<span>7</span>
					</p>
					<p>
						单品价格：<span>123</span>
					</p>
					<p>
						会员折扣价：<span>119</span>
					</p>
					<p>
						应单品小计：<span>123</span>
					</p>
					<p>
						状态：<span>已支付/已发货</span>
					</p>
				</div>
			</li>
			<li>
				<div class="clear tab_title">
					<span class="fl jy_name">
						<i>○</i>费用信息
					</span>
					<i class="fr yjt_icon"></i>	
					<span class="fr jy_money">查看</span>
				</div>
				<div class="transaction_details">
					<p>
						小计：<span>123</span>
					</p>
					<p>
						运费：<span>12</span>
					</p>
					<p>
						积分：<span>123</span>
					</p>
					<p>
						余额抵扣：<span>-123</span>
					</p>
					<p>
						优惠券抵扣：<span>123</span>
					</p>
					<p>
						价格调整：<span>减0.00</span>
					</p>
					<p>
						应付：<span>0.00</span>
					</p>
				</div>
			</li>
			<li>
				<div class="clear tab_title">
					<span class="fl jy_name">
						<i>○</i>操作信息
					</span>
					<i class="fr yjt_icon"></i>	
					<span class="fr jy_money">查看</span>
				</div>
				<div class="transaction_details">
					<p>
						操作备注：<input type="text" placeholder="请输入备注">
					</p>
					<p>
						当前可执行操作：<button class="btn_primary" type="button">付款</button>
						<button class="btn_primary" type="button">无效</button>
					</p>
				</div>
			</li>
			<li>
				<div class="clear tab_title">
					<span class="fl jy_name">
						<i>○</i>操作记录
					</span>
					<i class="fr yjt_icon"></i>	
					<span class="fr jy_money">查看</span>
				</div>
				<div class="transaction_details">
					<p>
						操作者：<span>孙行者</span>
					</p>
					<p>
						操作时间：<span>2017-05-10  17:20</span>
					</p>
					<p>
						订单状态：<span>已完成</span>
					</p>
					<p>
						付款状态：<span>已付款</span>
					</p>
					<p>
						发货状态：<span>已发货</span>
					</p>	
					<p>
						描述：<span>订单完成了</span>
					</p>
					<p>
						备注：<span>无</span>
					</p>
				</div>
			</li>
			</volist>
		</ul>
	</section>
	<!-- content end -->

	
<script>
	var isEv = /Mobile/.test(window.navigator.userAgent);
	var touchstart = isEv?"touchstart":"click";
	var tab_title = $(".tab_title");
	tab_title.on("touchstart",function(){
		var  animate_ele =  $(this).parent().find(".transaction_details");
		if(animate_ele.css("display")=="block"){
			animate_ele.slideUp("300",function(){
				$(this).parent().find(".yjt_icon").css({
					"transform":"rotate(0deg)"
				})	
			})
		}else{
			animate_ele.slideDown("300",function(){
				$(this).parent().find(".yjt_icon").css({
					"transform":"rotate(90deg)"
				})	
			})	
		}
	})
</script>

	
</body>
</html>